<!--
 * @Author: WangLong
 * @Date: 2024-01-31 18:45:07
 * @LastEditTime: 2024-05-08 17:26:39
 * @LastEditors: kls
 * @Description: 即使库存
 * @FilePath: \front_erp\src\views\stock\realInventoryDay\index.vue
-->
<template>
  <div class="requestAdd">
    <!-- 筛选按钮 -->
    <div class="search-button">
      <el-button class="btn search" @click="getrealinvent"
        ><el-icon class="icon" color="#fff"> <Search /> </el-icon
        >查询</el-button
      >
      <el-button class="btn add" @click="handleRefresh"
        ><el-icon class="icon" color="#fff"> <Refresh /> </el-icon
        >重置</el-button
      >
      <el-button
        class="btn save"
        v-if="activeName == 'first'"
        @click="handleExport('1')"
        ><el-icon class="icon" color="#fff"> <Download /> </el-icon
        >导出列表</el-button
      >
      <el-popover :width="170" trigger="click" placement="bottom">
        <template #reference>
          <el-button class="btn search" style="width: 100px"
            ><el-icon class="icon" color="#fff"> <Setting /> </el-icon
            >显示列</el-button
          >
        </template>
        <el-checkbox-group v-model="checkList" @change="handleCheckChange">
          <div>
            <el-checkbox label="fileList">物料图片</el-checkbox>
          </div>
          <div>
            <el-checkbox label="materialCode">物料编号</el-checkbox>
          </div>
          <div>
            <el-checkbox label="materialName">物料名称</el-checkbox>
          </div>
          <div>
            <el-checkbox label="factoryCode">出厂型号</el-checkbox>
          </div>
          <div>
            <el-checkbox label="technologyParameter">技术参数</el-checkbox>
          </div>
          <div>
            <el-checkbox label="materialUnitName">单位</el-checkbox>
          </div>
          <div>
            <el-checkbox label="purchasePrice">采购单价(元)</el-checkbox>
          </div>
          <div>
            <el-checkbox label="categoryName">物料分类</el-checkbox>
          </div>
          <div>
            <el-checkbox label="stockTypeName">存货类型</el-checkbox>
          </div>
          <div>
            <el-checkbox label="supplierName">供应商</el-checkbox>
          </div>
          <div>
            <el-checkbox label="manufactureName">生产厂商</el-checkbox>
          </div>
          <div>
            <el-checkbox label="inventoryQuantity">库存</el-checkbox>
          </div>
        </el-checkbox-group>
      </el-popover>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <!-- 筛选条件 -->
      <div class="search">
        <div class="search-item">
          <el-date-picker
            v-model="params.inDate"
            class="search-input"
            type="date"
            placeholder="指定日期"
          />
        </div>
        <div v-if="activeName == 'second'" class="search-item">
          <el-input
            clearable
            style="width: 8vw"
            v-model="params.materialNumber"
            class="search-input"
            placeholder="请输入序列号"
          ></el-input>
        </div>
        <div class="search-item">
          <el-input
            clearable
            style="width: 8vw"
            v-model="params.materialCode"
            class="search-input"
            placeholder="请输入物料编号"
          ></el-input>
        </div>
        <div class="search-item">
          <el-input
            clearable
            style="width: 8vw"
            v-model="params.materialName"
            class="search-input"
            placeholder="请输入物料名称"
          ></el-input>
        </div>
        <div class="search-item">
          <el-input
            style="width: 8vw"
            clearable
            v-model="params.factoryCode"
            class="search-input"
            placeholder="请输入出厂型号"
          ></el-input>
        </div>
        <div class="search-item">
          <el-input
            style="width: 8vw"
            clearable
            v-model="params.supplierName"
            class="search-input"
            placeholder="请输入供应商名称"
          ></el-input>
        </div>
        <div class="search-item">
          <el-input
            clearable
            v-model="params.manufactureName"
            class="search-input"
            placeholder="请输入生产厂商名称"
          ></el-input>
        </div>
        <div class="search-item">
          <el-tree-select
            v-model="params.categoryId"
            placeholder="请选择物料分类"
            :data="classOptions"
            :props="{
              value: 'categoryId',
              label: 'categoryName',
              children: 'children',
            }"
            clearable
            default-expand-all
          >
            <template #default="{ data: { categoryName, importantDevice } }">
              {{ categoryName }}
              <el-icon
                v-if="importantDevice == 1"
                style="margin-left: 5px; transform: translateY(2px)"
                title="贵重设备"
                color="#FF9552"
                :size="15"
              >
                <Box />
              </el-icon>
            </template>
          </el-tree-select>
        </div>
        <div class="search-item">
          <el-select
            v-model="params.stockType"
            placeholder="请选择存货类型"
            clearable
            class="search-input"
            style="width: 8vw"
          >
            <el-option
              v-for="dict in stockTypeList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </div>
        <div v-if="activeName == 'first'" class="search-item">
          <el-select
            v-model="params.warningType"
            placeholder="请选择库存预警"
            clearable
            class="search-input"
            style="width: 8vw"
          >
            <el-option
              v-for="dict in warningTypeList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </div>
      </div>

      <el-tab-pane label="库存查询" name="first" class="demoYabs">
        <div class="tabinfo">
          <!-- 表格数据 -->
          <el-table
            v-loading="loading"
            :data="inoutstorageList"
            border
            height="60vh"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column label="操作" width="60px">
              <template #default="{ row }">
                <div class="table-operate">
                  <el-icon
                    title="详情"
                    color="#007CEF"
                    class="table-icon"
                    :size="20"
                    @click="handleOperate(row)"
                  >
                    <Document />
                  </el-icon>
                </div> </template
            ></el-table-column>
            <el-table-column
              type="index"
              label="序号"
              :index="indexMethod"
              width="70"
              align="center"
            />
            <el-table-column
              label="物料图片"
              prop=""
              v-if="checkList.includes('fileList')"
              :show-overflow-tooltip="true"
              min-width="100"
            >
              <template #default="{ row }">
                <div v-if="row.fileList" class="image-content">
                  <el-image
                    v-for="(item, index) in row.fileList"
                    :key="index"
                    :preview-teleported="true"
                    style="width: 50px; height: 50px; margin-right: 5px"
                    :src="item.url"
                    :preview-src-list="showImg(item.url)"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="物料编号"
              prop="materialCode"
              v-if="checkList.includes('materialCode')"
              :show-overflow-tooltip="true"
              min-width="120"
            >
              <template #default="{ row }">
                <span>{{ row.materialCode ? row.materialCode : '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="物料名称"
              prop="materialName"
              v-if="checkList.includes('materialName')"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="出厂型号"
              prop="factoryCode"
              v-if="checkList.includes('factoryCode')"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="技术参数"
              prop="technologyParameter"
              v-if="checkList.includes('technologyParameter')"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="单位"
              prop="materialUnitName"
              v-if="checkList.includes('materialUnitName')"
              :show-overflow-tooltip="true"
              min-width="80"
            />
            <el-table-column
              label="采购单价(元)"
              prop="purchasePrice"
              v-if="checkList.includes('purchasePrice')"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="物料分类"
              prop="categoryName"
              v-if="checkList.includes('categoryName')"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="存货类型"
              prop="stockTypeName"
              v-if="checkList.includes('stockTypeName')"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="供应商"
              prop="supplierName"
              v-if="checkList.includes('supplierName')"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="生产厂商"
              prop="manufactureName"
              v-if="checkList.includes('manufactureName')"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="库存"
              prop="inventoryQuantity"
              v-if="checkList.includes('inventoryQuantity')"
              :show-overflow-tooltip="true"
              min-width="100"
            >
              <template #default="{ row }">
                <span
                  :style="{
                    color:
                      row.inventoryQuantity <= row.warningNumber
                        ? 'rgb(239, 41, 41)'
                        : '',
                  }"
                >
                  {{ row.inventoryQuantity }}
                </span>
              </template></el-table-column
            >
          </el-table>

          <!-- 分页 -->
          <pagination
            class="pagination"
            :total="total"
            v-model:page="params.pageNum"
            v-model:limit="params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="批次明细" name="second">
        <div class="tabinfo">
          <!-- 表格数据 -->
          <el-table
            v-loading="loading"
            :data="inoutstockDtlListList"
            border
            height="60vh"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              type="index"
              label="序号"
              :index="indexMethod"
              width="70"
              align="center"
            />
            <el-table-column
              label="入库批次"
              prop="batchCode"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="仓库"
              prop="warehouseCode"
              :show-overflow-tooltip="true"
              min-width="100"
            />
            <el-table-column
              label="数量"
              prop="quantity"
              :show-overflow-tooltip="true"
              min-width="100"
            />
            <el-table-column
              label="序列号"
              prop="materialNumber"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="厂家质保期"
              prop="expireDate"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="授权有效期"
              prop="validityPeriod"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="物料图片"
              prop=""
              :show-overflow-tooltip="true"
              min-width="100"
            >
              <template #default="{ row }">
                <div v-if="row.fileList" class="image-content">
                  <el-image
                    v-for="(item, index) in row.fileList"
                    :key="index"
                    :preview-teleported="true"
                    style="width: 50px; height: 50px; margin-right: 5px"
                    :src="item.url"
                    :preview-src-list="showImg(item.url)"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="物料编号"
              prop="materialCode"
              :show-overflow-tooltip="true"
              min-width="120"
            >
              <template #default="{ row }">
                <span>{{ row.materialCode ? row.materialCode : '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="物料名称"
              prop="materialName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="出厂型号"
              prop="factoryCode"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="技术参数"
              prop="technologyParameter"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="单位"
              prop="materialUnitName"
              :show-overflow-tooltip="true"
              min-width="80"
            />
            <el-table-column
              label="采购单价(元)"
              prop="purchasePrice"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="物料分类"
              prop="categoryName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="是否已出库"
              prop=""
              :show-overflow-tooltip="true"
              min-width="120"
            >
              <template #default="{ row }">
                <span>{{ row.quantity > 0 ? '未出库' : '已出库' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="存货类型"
              prop="stockTypeName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="供应商"
              prop="supplierName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="生产厂商"
              prop="manufactureName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
          </el-table>

          <!-- 分页 -->
          <pagination
            class="pagination"
            :total="stockDtltotal"
            v-model:page="params.pageNum"
            v-model:limit="params.pageSize"
            @pagination="getstockDtltotalList"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { getDictsApi } from '@/api/dict'
import { getMaterialClassListApi } from '@/api/information/materialClass'
import { getstockDayList, getstockDayDtlList } from '@/api/stock/realinventory'
import { addTableHeaderApi, getTableHeaderApi } from '@/api/pub'
const activeName = ref('first')
//库存列表数据
const inoutstorageList = ref([])
//库存明细列表数据
const inoutstockDtlListList = ref([])
//物料分类列表
const categoryIdList = ref([])
//存货类型列表
const stockTypeList = ref([])
//存货预警列表
const warningTypeList = ref([])
// 库存列表总数
const total = ref(0)
// 库存明显列表总数
const stockDtltotal = ref(0)
// 表格加载效果
const loading = ref(false)
// 分类列表
const classOptions = ref(undefined)
// 搜索参数
const originalParams = {
  materialNumber: '', // 序列号
  materialCode: '', //物料编号
  materialName: '', // 物料名称
  factoryCode: '', //出场型号
  supplierName: '', //供应商名称
  manufactureName: '', //生产厂商名称
  categoryId: '', //物料分类
  stockType: null, // 存货类型
  warningType: null, // 库存预警
  pageNum: 1,
  pageSize: 50,
  //inDate: null
}
// 将初始数据转化为响应式对象
const params = reactive({ ...originalParams })

const checkList = ref([
  'fileList',
  'materialCode',
  'materialName',
  'factoryCode',
  'technologyParameter',
  'materialUnitName',
  'purchasePrice',
  'categoryName',
  'stockTypeName',
  'supplierName',
  'manufactureName',
  'inventoryQuantity',
  'routeQty',
])

/**
 * @description: 复选框选中
 */
const handleCheckChange = async (val) => {
  var str = val.join(',')
  const result = await addTableHeaderApi({
    moduleType: 34,
    titleField: str,
  })
}

/**
 * @description: 获取表头
 */
const getTableHeader = async () => {
  const result = await getTableHeaderApi({
    moduleType: 34,
  })
  if (result.code == 200) {
    var arr = result.data.titleField.split(',')
    checkList.value = arr
  }
}

/**
 * @description: 重置
 */
const handleRefresh = () => {
  Object.assign(params, {
    materialNumber: '', // 序列号
    materialCode: '', //物料编号
    materialName: '', // 物料名称
    factoryCode: '', //出场型号
    supplierName: '', //供应商名称
    manufactureName: '', //生产厂商名称
    categoryId: '', //物料分类
    stockType: null, // 存货类型
    warningType: null, // 库存预警
    manufactureName: '',
    pageNum: 1,
    pageSize: 50,
    inDate: null,
  })
  inoutstorageList.value = []
  inoutstockDtlListList.value = []
  //getList()
  //getstockDtltotalList()
}
/**
 * @description: 即使库存查询
 */
const getrealinvent = () => {
  params.tempoaryMaterialId = null
  if (activeName.value === 'second') {
    getstockDtltotalList()
  } else {
    getList()
  }
}
watch(activeName, (newValue, oldValue) => {
  // 监听tab变化时将筛选条件数据恢复至原始数据
  Object.keys(originalParams).forEach((key) => {
    params[key] = originalParams[key]
  })
  if (newValue === 'second') {
    getstockDtltotalList()
  } else {
    params.tempoaryMaterialId = null
    getList()
  }
})
/**
 * @description: 获取库存列表
 */
const getList = async () => {
  try {
    loading.value = true
    let { pageNum, pageSize } = params
    const res = await getstockDayList({ pageNum, pageSize }, params)
    inoutstorageList.value = res.rows
    total.value = res.total
    loading.value = false
  } catch {
    loading.value = false
  }
}
/**
 * @description: 跳转到库存明细列表
 */
const handleOperate = async (row) => {
  activeName.value = 'second'
  params.tempoaryMaterialId = row.tempoaryMaterialId
}
/**
 * @description: 获取库存明细列表
 */

const getstockDtltotalList = async () => {
  try {
    loading.value = true
    let { pageNum, pageSize } = params
    const res = await getstockDayDtlList({ pageNum, pageSize }, params)
    inoutstockDtlListList.value = res.rows
    stockDtltotal.value = res.total
    loading.value = false
  } catch {
    loading.value = false
  }
}
/**
 * @description: 获取字典
 */
async function getDicts() {
  // 存货类型
  await getDictsApi('stock_type').then((res) => {
    if (res.code === 200) {
      stockTypeList.value = res.data
    }
  })

  // 库存预警
  await getDictsApi('erp_tempary_material_warning').then((res) => {
    if (res.code === 200) {
      warningTypeList.value = res.data
    }
  })
}
/**
 * @description: 序号
 * @param {Number} index 索引
 */
function indexMethod(index) {
  const currentPage = params.pageNum
  const pageSize = params.pageSize
  const truelndex = (currentPage - 1) * pageSize + index + 1
  return truelndex
}
/**
 * @description: 获取分类列表
 */
const getMaterialClassList = async () => {
  const res = await getMaterialClassListApi()
  res.rows.forEach((item) => {
    item.id = item.categoryId
  })
  classOptions.value = proxy.handleTree(res.rows, 'id')
}
const showImg = (img) => {
  let imgArr = []
  imgArr.push(img)
  return imgArr
}

/**
 * @description: 处理导出
 * @param {String} flag 1.列表 2.明细列表
 */
const handleExport = async (flag) => {
  const currentDate = new Date()
  const year = currentDate.getFullYear()
  let month = currentDate.getMonth() + 1 // 月份是从 0 开始计数的，因此要加1
  if (month < 10) {
    month = '0' + month
  }
  const day = currentDate.getDate()
  let date = year + '' + month + '' + day

  let fileNmae = date + ' 235959库存'
  let { pageNum, pageSize } = params

  /* 导出列表 */
  proxy.download(
    `/system/temparyMaterialDay/export`,
    params,
    `${fileNmae}.xlsx`,
    null,
    1
  )
}

onMounted(() => {
  let start = new Date()
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
  params.inDate = start
  getDicts()
  getList()
  getMaterialClassList()
  getTableHeader()
})
</script>

<style lang="scss" scoped>
.requestAdd {
  padding: 5px 20px;
  width: 100%;
  height: 100%;
  .pagination {
    height: 60px;
  }
  :deep(.el-tabs__item.is-top) {
    width: 97px;

    font-size: 16px;
  }
  .image-content {
    width: 100%;
    line-height: 0px;
    overflow: auto;
  }
}
</style>
